<template>
  <dtDialog
    title="关联接口"
    :visible.sync="visible"
    :is-loading="loading"
    :footer-slot="true"
  >
    <el-input
      v-model.trim="resourceName"
      placeholder="请输入接口名"
      maxlength="30"
      style="width:280px;margin-bottom: 20px;"
      size="small"
      prefix-icon="el-icon-search"
      clearable
      @keyup.enter.native="handleQuery"
      @clear="handleReset"
    />
    <!-- 应用层 -->
    <div v-for="app in apiGroupList" :key="app.appId">
      <el-checkbox v-model="app.checked" class="box" :indeterminate="app.serviceList.filter(app=>app.checked).length > 0 && !app.checked"
                   @change="handleCheckedAppChange($event,app)">
        <template name="label">
          <span style="font-weight:bold ">{{ app.appName }}</span>
        </template>
      </el-checkbox>
      <!-- 服务层-->
      <div v-for="serve in app.serviceList" :key="serve.serviceId" style="padding-left:20px;">
        <el-checkbox v-model="serve.checked" class="box" :indeterminate="serve.modularList.filter(serve=>serve.checked).length > 0 && !serve.checked"
                     @change="handleCheckedServeChange($event,app,serve)">
          <template name="label">
            <span style="font-weight:bold ">{{ serve.serviceName }}</span>
          </template>
        </el-checkbox>
        <!-- 类层 -->
        <div v-for="modular in serve.modularList" :key="modular.modularCode" style="padding-left:20px;">
          <el-checkbox v-model="modular.checked" class="box" :indeterminate="modular.resourceList.filter(modular=>modular.checked).length > 0 && !modular.checked"
                       @change="handleCheckedModularChange($event,app,serve,modular)">
            <template name="label">
              <span style="font-weight:bold ">{{ modular.modularName }}</span>
            </template>
          </el-checkbox>
          <div style="padding-left:20px;">
            <!-- 接口名 -->
            <el-checkbox v-for="resource in modular.resourceList" :key="resource.resourceId" v-model="resource.checked"
                         class="box" @change="handleCheckedResourceChange($event,app, serve, modular,resource)">
              <template name="label">
                <span style="font-weight:400" :class="resource.isRelate?'':'noRelate'">{{ resource.resourceName }}</span>
              </template>
            </el-checkbox>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>

    </span>
  </dtDialog>
</template>
<script>
import interfacePermissionApi from '@/framework/api/authCenter/interfacePermission/interfacePermission'

export default {
  data() {
    return {
      loading: false,
      visible: false,
      formData: {},
      apiGroupList: [],
      params: {
        type: 1, // 1关联接口 0解除关联
        appId: '', // 所属应用的id
        boundId: '', // 被绑定的菜单/按钮id
        boundType: '1', // 被绑定的标的类型 1菜单 2 按钮 3三方
        resourceIdList: [] // 接口id集合[]
      },
      resourceName: ''
    }
  },
  watch: {
    resourceName(n, o) {
      this.getApiByAppServiceList()
    }
  },
  mounted() {
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.getApiByAppServiceList()
    },
    /** 清空 重置按钮操作 */
    handleReset() {
      this.getApiByAppServiceList()
    },
    // 打开 获取数据
    openApi(data) {
      this.visible = true
      this.params.boundId = data.id
      this.params.boundType = data.type
      this.params.appId = data.appId
      this.params.resourceIdList = []
      this.apiGroupList = []
      this.resourceName = ''
      this.getApiByAppServiceList()
    },
    // 获取应用在接口数据
    getApiByAppServiceList() {
      const params = {
        boundId: this.params.boundId,
        boundType: this.params.boundType,
        appId: this.params.appId,
        resourceName: this.resourceName
      }
      interfacePermissionApi.getApiByAppServiceList(params).then((res) => {
        // this.apiGroupList.push(res.data)
        this.apiGroupList = res.data
      })
    },
    // 整个全选
    handleCheckedAppChange(val, data) {
      this.apiGroupList.forEach((app) => {
        if (app.appId === data.appId) {
          app.checked = val
          app.serviceList && app.serviceList.forEach((serve) => {
            serve.checked = val
            serve.modularList && serve.modularList.forEach((modular) => {
              modular.checked = val
              modular.resourceList && modular.resourceList.forEach((resource) => {
                resource.checked = val
              })
            })
          })
        }
        return this.apiGroupList
      })
    },

    // 全选整个服务层
    handleCheckedServeChange(value, app, item) {
      app.checked = app.serviceList.every((item) => item.checked)
      if (value !== 'No') {
        item.modularList.forEach((s) => {
          s.checked = item.checked
          s.resourceList && s.resourceList.forEach((resource) => {
            resource.checked = item.checked
          })
        })
      }
    },
    // 全选整个类层
    handleCheckedModularChange(value, app, serve, modular) {
      serve.checked = serve.modularList.every((item) => item.checked)
      app.checked = app.serviceList.every((item) => item.checked)
      if (value !== 'No') {
        modular.resourceList.forEach((resource) => {
          resource.checked = modular.checked
        })
      }
    },
    handleCheckedResourceChange(value, app, serve, modular, resource) {
      modular.checked = modular.resourceList.every((item) => item.checked)
      serve.checked = serve.modularList.every((item) => item.checked)
      app.checked = app.serviceList.every((item) => item.checked)
    },
    reset() {
      this.$confirm('取消后，您的设置将不会保存')
        .then((_) => {
          this.visible = false
          this.params.resourceIdList = []
          this.apiGroupList = []
          this.resourceName = ''
        })
        .catch((_) => {})
    },
    submit() {
      const grantResourceList = []
      this.apiGroupList.forEach((app) => {
        app.serviceList.forEach((serve) => {
          serve.modularList.forEach((modular) => {
            modular.resourceList.forEach((resource) => {
              resource.checked && grantResourceList.push(resource.resourceId)
            })
          })
        })
      })
      this.params.resourceIdList = grantResourceList
      interfacePermissionApi.relateApi(this.params).then(() => {
        this.$dtMessage({
          type: 'success',
          message: '关联成功'
        })
        this.visible = false
        this.$parent.getList()
        // this.params.resourceIdList = []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    color: #000;
    margin-bottom: 8px;
}
.activeRelate{
    color: #333;
}
.noRelate{
    color: red;
}
</style>
